<template>
    <div class="page-container">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <h3>客户分析报表</h3>
            <div>
              <el-button type="primary" icon="Download">导出数据</el-button>
            </div>
          </div>
        </template>
  
        <div class="filter-section">
          <el-form :inline="true">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
  
        <div class="chart-container">
          <div ref="customerChart" style="height: 400px;"></div>
        </div>
  
        <el-divider />
  
        <el-table :data="customerData" style="width: 100%" class="report-table">
          <el-table-column prop="customer" label="客户名称" />
          <el-table-column prop="transactions" label="交易次数" align="center" />
          <el-table-column prop="amount" label="交易金额" align="right">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="percentage" label="占比" align="center">
            <template #default="{ row }">
              {{ row.percentage }}%
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  import { formatCurrency } from '../util/util'
  
  const dateRange = ref([])
  const customerChart = ref<HTMLElement | null>(null)
  let chartInstance: echarts.ECharts | null = null
  
  const customerData = ref([
    { customer: '腾讯云服务', transactions: 28, amount: 125000, percentage: 32.5 },
    { customer: '阿里云服务', transactions: 22, amount: 98000, percentage: 25.4 },
    { customer: '服务器托管商', transactions: 15, amount: 72000, percentage: 18.7 },
    { customer: '客户A公司', transactions: 12, amount: 56000, percentage: 14.5 },
    { customer: '客户B公司', transactions: 8, amount: 34000, percentage: 8.9 }
  ])
  
  const loadData = () => {
    console.log('加载客户数据', dateRange.value)
  }
  
  const initChart = () => {
    if (customerChart.value) {
      chartInstance = echarts.init(customerChart.value)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: ¥{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center'
        },
        series: [
          {
            name: '客户分析',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: customerData.value.map(item => ({
              value: item.amount,
              name: item.customer
            }))
          }
        ]
      }
      chartInstance.setOption(option)
    }
  }
  
  onMounted(() => {
    setTimeout(() => {
      initChart()
    }, 100)
    
    window.addEventListener('resize', () => {
      if (chartInstance) {
        chartInstance.resize()
      }
    })
  })
  
  onUnmounted(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
    window.removeEventListener('resize', () => {})
  })
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    padding: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-section {
      margin-bottom: 20px;
    }
    
    .chart-container {
      margin-bottom: 30px;
    }
    
    .report-table {
      margin-top: 20px;
    }
  }
  </style>